<template>
  <div class="userIndex">
    <index-login @complete="complete" v-if="isNeedLogin"></index-login>
    <div class="userIndexHead">
      <div class="userIndexHeadBg">
        <img src="/static/images/user/userIndexHeadBg.png">
          <!-- <div class='isLogin' @click="alrightSubmit">立即登录</div> -->
      </div>
      <div class="userIndexHeadTxt">
        <div class="userIndexHeadInfo">
          <div class="userIndexHeadImg">
            <img class="headPicture" :src="userInfo.avatar" v-if="comUserInfo">
            <img src="/static/images/user/logo.png" v-else>
          </div>
          <div v-if="isAgent == true" class="badgeBig">
            <img src="/static/images/user/headImg.png" alt="">
          </div>
          <!-- <div  class="badgeMin">
            <img src="/static/images/user/headImg1.png" alt="">
          </div> -->
          <h3 class="userName" v-if="comUserInfo">{{comUserInfo.nickName}}</h3>
          <h3 class="userName" v-else  @click="alrightSubmit" >立即登录</h3>
          <div class="displayTanzhu">
            <p class="currentTanzhu" v-if="isAgent == true && agentLevel == 0">当前等级：<span style="color:#999999;font-weight:bold;">暂无等级</span></p>
            <p class="currentTanzhu" v-if="isAgent == true && agentLevel == 3">当前等级：<span style="color:#80D1C5;font-weight:bold;">青龙堂主</span></p>
            <p class="currentTanzhu" v-if="isAgent == true && agentLevel == 2">当前等级：<span style="color:#DADADA;font-weight:bold;">白虎堂主</span></p>
            <p class="currentTanzhu" v-if="isAgent == true && agentLevel == 4">当前等级：<span style="color:#FCB5AE;font-weight:bold;">朱雀堂主</span></p>
            <p class="currentTanzhu" v-if="isAgent == true && agentLevel == 1">当前等级：<span style="color:#ADADAD;font-weight:bold;">玄武堂主</span></p>
            <p class="currentJifen" v-if="comUserInfo">当前美豆：<span>{{comUserInfo.integral}}</span></p>
            <p class="currentJifen" v-else>当前美豆：<span>0</span></p>
          </div>
        </div>  
      </div>
    </div>
    <div class="userMyOrder">
      <p>我的订单</p>
      <div @click="allorders">查看全部订单<img src="/static/images/pay/righticon.png"></div>
    </div>
    <div class="userOrderState">
      <ul class="userOrderStateUl">
        <li>
          <div @click="payment(0)">
            <div class="userOrderStateImg" ><img src="/static/images/user/userOrderState1.png"></div>
            <p class="userOrderStateTxt">待付款</p>
            <div class="redPoint" v-if="stateNumber&&stateNumber[0].orderNumber">{{stateNumber[0].orderNumber|numFilter}}</div>
          </div>
        </li>
        <li>
          <div  @click="payment(1)">
            <div class="userOrderStateImg"><img src="/static/images/user/userOrderState2.png"></div>
            <p class="userOrderStateTxt">待发货</p>
            <div class="redPoint" v-if="stateNumber&&stateNumber[1].orderNumber">{{stateNumber[1].orderNumber|numFilter}}</div>
          </div>
        </li>
        <li>
          <div @click="payment(2)">
            <div class="userOrderStateImg" ><img src="/static/images/user/userOrderState3.png"></div>
            <p class="userOrderStateTxt">待收货</p>
            <div class="redPoint" v-if="stateNumber&&stateNumber[2].orderNumber">{{stateNumber[2].orderNumber|numFilter}}</div>
          </div>
        </li>
        <li>
          <div @click="payment(3)">
            <div class="userOrderStateImg" ><img src="/static/images/user/userOrderState4.png"></div>
            <p class="userOrderStateTxt">分享中</p>
            <div class="redPoint" v-if="stateNumber&&stateNumber[3].orderNumber">{{stateNumber[3].orderNumber|numFilter}}</div>
          </div>
        </li>
      </ul>
    </div>
    <div class="userItem">
      <ul class="userItemUl">
        <li @click="toUrl('../user-withdrawal/main')">
          <div>
            <div class="userItemImg"><img src="/static/images/user/userOrderState5.png"></div>
            <p class="userItemTxt">我的美豆</p>
          </div>
        </li>
        <li @click="toUrl('../user-twocode/main')">
          <div>
            <div class="userItemImg"><img src="/static/images/user/userOrderState6.png"></div>
            <p class="userItemTxt">我的二维码</p>
          </div>
        </li>
        <li @click="toUrl('../address/main')">
          <div>
            <div class="userItemImg"><img src="/static/images/user/userOrderState8.png"></div>
            <p class="userItemTxt">收货地址</p>
          </div>
        </li>
      </ul>
      <ul class="userItemUl">
        <li @click="applyAgent()">
          <div>
            <div class="userItemImg"><img src="/static/images/user/userOrderState12.png"></div>
            <p class="userItemTxt">申请堂主</p>
          </div>
        </li>
        <li @click="toUrl('../user-coupon/main')">
          <div>
            <div class="userItemImg"><img src="/static/images/user/userOrderState10.png"></div>
            <p class="userItemTxt">我的卡劵</p>
          </div>
        </li>
        <li class="noBorder" @click="toUrl('../user-mycollect/main')">
          <div>
            <div class="userItemImg"><img src="/static/images/user/userOrderState7.png"></div>
            <p class="userItemTxt">我的收藏</p>
          </div>
        </li>
      </ul>
      <ul class="userItemUl" v-if="isShowBox">
        <li @click="toUrl('../user-myfans/main')" >
          <div>
            <div class="userItemImg"><img src="/static/images/user/userOrderState9.png"></div>
            <p class="userItemTxt">我的粉丝</p>
          </div>
        </li>
        <li @click="toUrl('../user-leaderBoard/main')" >
          <div>
            <div class="userItemImg"><img src="/static/images/user/userOrderState13.png"></div>
            <p class="userItemTxt">我的排行榜</p>
          </div>
        </li>
        <li @click="WriteOff()">
          <div>
            <div class="userItemImg"><img src="https://static.daoyintech.com/sys.png"></div>
            <p class="userItemTxt">核销扫一扫</p>
          </div>
        </li>
      </ul>
      <ul class="userItemUl"  v-if="!isShowBox">
        <li @click="WriteOff()">
          <div>
            <div class="userItemImg"><img src="https://static.daoyintech.com/sys.png"></div>
            <p class="userItemTxt">核销扫一扫</p>
          </div>
        </li>
      </ul>
      <ul class="userItemUl" v-if="false">
        <li @click="toUrl('../user-cooperation/main')">
          <div>
            <div class="userItemImg"><img src="/static/images/user/userOrderState11.png"></div>
            <p class="userItemTxt">洽谈合作</p>
          </div>
        </li>
        <li></li>
        <li></li>
      </ul>
    </div>
    <div>{{content}}</div>
  </div>
</template>

<script>
import indexLogin from '@/components/dialog/index-login'
import userItem from '@/components/user/user-item.vue'
import {mapGetters} from 'vuex'
  export default {
    components:{
      indexLogin,userItem
    },
    data(){
      return{
        userInfo: null,
        stateNumber: null,
        isNeedLogin: false,
        isShowBox:false,
        isAgent:'',
        agentLevel:'',
        flag:false, //标识是否获得了unionId
        content:'',
        islogins:true
      }
    },
    computed:{
      comUserInfo(){
        return this.userInfo
      }
    },
    onLoad(){
      console.log('user页面de falg',this.flag)
    },
    onShow(){
      this.isShowFansAndBang();
      this.updateUserInfo()
      this.updateNumber()
    },
    filters: {
      numFilter(value) {
       if(value > 99){
          return '99+'
        }else{
          return value
        }
      } 
    },
    methods: {
      async WriteOff(){
        console.log("开始核销")
        let self = this
        self.$http.get('integral/my/integral','','',false).then((res)=>{ 
          console.log(res.data.code)
          if(res.data.code == 0){
            console.log("可以核销")
            wx.scanCode({
              onlyFromCamera: true,
              success (ret) {
                
                let arr = ret.result.split('=')
                if(arr[0] == 'coupon'){
                  self.WriteOffCoupon(arr[1])
                }else{
                  let orderNo = ret.result
                  self.WriteOffajax(orderNo)
                }
              }
            })
          }else{
            console.log("不能核销，需要登录")
            self.isNeedLogin = true
          }
        })
        
      },
      //核销优惠券
      WriteOffCoupon(id){
        console.log(id)
        let self = this
        self.$http.get('/userCoupon/useCoupon?couponId='+id ).then((ret)=>{ 
          console.log(JSON.stringify(ret.data))
          if(ret.data.code == 0){
            self.showToast("核销成功")
          }else{
            console.log(ret.data.msg)
            wx.showToast({
              title: ret.data.msg,
              icon:'none',
              duration: 3000,
            });
          }

        })

      },
      //核销调用
      WriteOffajax(orderNo){
        let self = this
        let data = {
            "orderNo":orderNo
        }
        self.$http.get('/order/cancelOrder', data ).then((ret)=>{ 
          console.log(JSON.stringify(ret))
          if(ret.data.code == 0){
            self.showToast("核销成功")
            self.updateUserInfo()
          }else{
            self.showToast(ret.data.msg)
          }
        })
      },
      showToast (title) {
        wx.showToast({
          title: title,
          duration: 3000,
        });
      },
      //立即登录
      alrightSubmit(){
        this.isNeedLogin = true
      },
      complete(){
        console.log("我是走的complete")
        this.updateUserInfo()//用户信息
        this.updateNumber()//小红点
        this.isShowFansAndBang(); //查询是否堂主
      },
      updateUserInfo(){//用户信息
        this.$http.get('integral/my/integral','','',false).then((res)=>{ 
          // if(res.data.code === 2){
          //   this.isNeedLogin = true
          //   console.log("需要登录")
          // }else{
            this.isNeedLogin = false
            this.userInfo = res.data.data
            this.isAgent = res.data.data.isAgent
            this.agentLevel = res.data.data.agentLevel
            if(res.data.code == 2){
              this.islogins = false
            }
          // }
        })
      },

      
      updateNumber(){//小红点
        this.$http.get('order/findMyAllOrderByType','','',false).then((res)=>{ 
          this.stateNumber = res.data.data
        })
      },
      toUrl (pageUrl){
        const url = pageUrl;
        if(this.flag){
          wx.navigateTo({ url }) 
       }else{
         this.isNeedLogin = true
       }
      },
      allorders (){
        const url = "../allorders/main?aid="+11;
        if(this.flag){
          wx.navigateTo({ url }) 
        }else {
          this.isNeedLogin = true
        }
      },
      payment (id){
        const url ='../allorders/main?aid=' + id;
        if(this.flag) {
          wx.navigateTo({ url })
        }else {
          this.isNeedLogin = true
        }
      },
      // 对页面的是否显示粉丝和排行榜判断
      isShowFansAndBang() {
        this.$http.get('agent/findByAgentInfo','','',false).then((res)=>{
          console.log("查询是否是活伙人",res)
          if(res.data.code == 0){
            this.isShowBox = true
            this.flag = true
          }else if(res.data.code == 3){
            this.flag = false
          }else {
            this.isShowBox = false
            this.flag = true
          }
        })
      },
      applyAgent(){
        this.$http.get('agent/findByAgentInfo','','',false).then((res)=>{ 
          if(res.data.code === 0){//已经是合伙人了
            const url ='../user-applyagent-success/main'
            if(this.flag){
              wx.navigateTo({ url })
            }else{
              this.isNeedLogin = true
            }
          }else{
            const url ='../user-applyagent/main'
            if(this.flag){
              wx.navigateTo({ url })
            }else{
              this.isNeedLogin = true
            }
          }
        })
      }
    }
  }
</script>

<style scoped>
.badgeBig {
  width:136rpx;
  height:50rpx;
  position: absolute;
  top: 95rpx;
  left: 306rpx
}
.badgeBig img {
  width:136rpx;
  height:50rpx;
}

.badgeMin {
  width:40rpx;
  height:40rpx;
  position: absolute;
  top: 147rpx;
  left: 300rpx
}
.badgeMin img {
  width:40rpx;
  height:40rpx;
}
.userIndex{
  background: #efeff4;
}
.userIndex .userIndexHead{
  width: 100%;
  height: 344rpx;
  position: relative;
  background: #fff;
}
.userIndex .userIndexHead .userIndexHeadBg{
  width: 100%;
  height: 344rpx;
  position: relative;
}
.userIndex .userIndexHead .userIndexHeadBg img{
  width: 100%;
  height: 100%;
}
.userIndex .userIndexHead .userIndexHeadBg .isLogin {
  position: absolute;
  top: 10%;
  right:10%;
  z-index:1000;
  color:#E38B8A;
  font-size: 36rpx;
  width: 200rpx;
  height: 200rpx;
  /* background: red; */
}
.userIndex .userIndexHead .userIndexHeadTxt{
  width: 100%;
  position: absolute;
  top: 40rpx;
  display: flex;
  justify-content: center;
  text-align: center;
}
.userIndex .userIndexHead .userIndexHeadTxt .userIndexHeadInfo{
  overflow: hidden;
}
.userIndex .userIndexHead .userIndexHeadTxt .userIndexHeadInfo .userIndexHeadImg{
  width: 136rpx;
  height: 136rpx;
  margin: auto;
  /* position: relative; */
}
.userIndex .userIndexHead .userIndexHeadTxt .userIndexHeadInfo .userIndexHeadImg img{
  width: 100%;
  height: 100%;
  border-radius: 100%;
}
.userIndex .userIndexHead .userIndexHeadTxt .userIndexHeadInfo .userName{
  font-size: 34rpx;
  color: #000;
  font-weight: 600;
  margin: 15rpx 0 20rpx;
  padding: 0 30rpx;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.userIndex .userIndexHead .userIndexHeadTxt .userIndexHeadInfo .displayTanzhu {
  display: flex;
  justify-content: center;
  align-items: center;
}
.userIndex .userIndexHead .userIndexHeadTxt .userIndexHeadInfo .currentTanzhu {
  font-size: 28rpx;
  color:#000;
  margin-right: 80rpx;
}
/* .userIndex .userIndexHead .userIndexHeadTxt .userIndexHeadInfo .currentTanzhu span{
  color: #DADADA;
} */
.userIndex .userIndexHead .userIndexHeadTxt .userIndexHeadInfo .currentJifen{
  font-size: 28rpx;
  color: #000;
}
.userIndex .userIndexHead .userIndexHeadTxt .userIndexHeadInfo .currentJifen span{
  color: #e38a8a;
}
.userMyOrder{
  display: flex;
  align-items: center;
  padding: 0 30rpx;
  height: 92rpx;
  border-bottom: 2rpx solid #efeff4;
  background: #fff;
}
.userMyOrder p{
  flex: 1;
  font-size: 32rpx;
  color: #2a2a2a;
}
.userMyOrder div{
  display: flex;
  align-items: center;
  font-size: 28rpx;
  color: #b0b0b0;
}
.userMyOrder img{
  width: 17rpx;
  height: 30rpx;
  margin-left: 20rpx;
}  
.userOrderState{
  margin-bottom: 20rpx;
}
.userOrderState .userOrderStateUl{
  display: flex;
  background: #fff;
}
.userOrderState .userOrderStateUl li{
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 132rpx;
  font-size: 26rpx;
  color: #2a2a2a;
}
.userOrderState .userOrderStateUl li>div{
  position: relative;
}
.userOrderState .userOrderStateUl li>div .redPoint{
  position: absolute;
  top: -8rpx;
  right: -5rpx;
  padding: 0 3rpx;
  min-width: 34rpx;
  height: 36rpx;
  border-radius: 100%;
  background: #e38a8a;
  color: #fff;
  font-size: 24rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.userOrderState .userOrderStateUl li .userOrderStateImg{
  width: 44rpx;
  height: 38rpx;
  margin: 10rpx auto;
}
.userOrderState .userOrderStateUl li .userOrderStateImg img{
  width: 100%;
  height: 100%;  
}
.userOrderState .userOrderStateUl li .userOrderStateTxt{
  margin-top: 17rpx;
}
.userItem .userItemUl{
  display: flex;
  background: #fff;
}
.userItem .userItemUl li{
  width: 33.33%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 196rpx;
  font-size: 26rpx;
  color: #2a2a2a;
  border-bottom: 1rpx solid #efeff4;
  border-right: 1rpx solid #efeff4;
}
.userItem .userItemUl li .userItemImg{
  width: 50rpx;
  height: 48rpx;
  margin: 10rpx auto;
}
.userItem .userItemUl li .noBorder{
  border: none;
}
.userItem .userItemUl li .userItemImg img{
  width: 100%;
  height: 100%;  
}
.userItem .userItemUl li .userItemTxt{
  margin-top: 25rpx;
}
</style>
